<script setup>
import MoniterItem from "@/views/populationInformation/components/MoniterItem.vue";
</script>

<template>
  <MoniterItem img="3" class="card" title="全县人口信息">
    <template #content>
      <div class="special-main">
        <div class="main-row">
          <div class="special-item" v-for="(item,index) in list">
            <div class="item-img" :style="{backgroundImage:'url('+item.url+')'}">
              <span class="bottom-text">{{ item.label }}</span>
            </div>
            <div class="item-text">
              <span class="num">{{item.value}}</span>
              <span class="unit">人</span>
            </div>
          </div>
        </div>
      </div>
    </template>
  </MoniterItem>
</template>

<script>
import households from '../img/households.png'
import population from '../img/population.png'
import flow from '../img/flow.png'
import returnHome from '../img/returnHome.png'
import migrantWorkers from '../img/migrantWorkers.png'
import school from '../img/school.png'
export default {
  data(){
    return{
      list:[
        {
          url:households,
          label:'全县常驻人户数',
          value:'3,456'
        },
        {
          url:population,
          label:'常驻人口数',
          value:'3,456'
        },
        {
          url:flow,
          label:'流动人口数',
          value:'3,456'
        },
        {
          url:returnHome,
          label:'返乡人口数',
          value:'3,456'
        },
        {
          url:migrantWorkers,
          label:'外出务工人数',
          value:'3,456'
        },
        {
          url:school,
          label:'外出上学人口',
          value:'3,456'
        },
      ]
    }
  }
}
</script>
<style lang="less" scoped>
.card{
  height: 360px;
}
.special-main {
  height: 100%;
  .main-row {
/*    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px;*/
    width: 100%;
    height: 100%;
    display: flex;
    /* align-content: center; */
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    .special-item {
      padding: 0 10px;
      margin: 0 20px;
      .item-img {
        width: 120px;
        height: 90px;
        margin: auto;
        background-size: 100% 130%;
        background-repeat: no-repeat;
        text-align: center;
        line-height: 160px;

        .bottom-text{
          font-size: 16px;
          font-family: Source Han Sans CN,serif;
          font-weight: 500;
          color: #FFFFFF;
          opacity: 1;
        }
      }
      .item-text {
        margin: auto;
        text-align: center;
        .num{
          font-size: 20px;
          font-family: Source Han Sans CN,serif;
          font-weight: 500;
          color: #37FAC6;
          opacity: 1;
        }
        .unit{
          font-size: 14px;
          font-family: Source Han Sans CN,serif;
          font-weight: 400;
          color: #FFFFFF;
          opacity: 1;
        }
      /*  div {
          display: inline-block;
          color: #37FAC6;
          font-size: 16px;
          font-weight: 500;

          span {
            font-size: 14px;
            font-weight: 400;
            color: #FFFFFF;
          }
        }*/
      }
    }
  }
}
</style>
